<template>
	<view class="container">
		<!-- 处方列表 -->
		<view class="prescription-list">
			<view class="prescription-card" v-for="(item, index) in prescriptionList" :key="item.medicineOrderId">
				<!-- 地址 -->
				<view class="info-item">
					<text class="label">地址：</text>
					<text class="value">{{ item.address }}</text>
				</view>

				<!-- 电话 -->
				<view class="info-item">
					<text class="label">电话：</text>
					<text class="value">{{ item.phone }}</text>
				</view>

				<!-- 订单编号 -->
				<view class="info-item">
					<text class="label">订单编号：</text>
					<text class="value">{{ item.orderId }}</text>
				</view>

				<!-- 价格 -->
				<view class="info-item">
					<text class="label">价格：</text>
					<text class="value price">¥{{ item.price }}</text>
				</view>

				<!-- 创建时间 -->
				<view class="info-item">
					<text class="label">创建时间：</text>
					<text class="value">{{ item.createTime }}</text>
				</view>

				<!-- 评论按钮部分替换为 -->
				<view class="button-container">
					<view v-if="item.checkingCommentStatus" class="loading-indicator">
						<!-- 使用uni-app原生loading组件 -->
						<loading size="16" color="#07c160"></loading>
					</view>
					<button v-else-if="!item.hasCommented" type="primary" class="comment-btn"
						@click="handleComment(item.medicalRecordId, index)">
						评论
					</button>
					<button v-else type="primary" class="comment-btn commented" disabled>
						已评论
					</button>
				</view>

				<!-- 分隔线（除最后一项外都显示） -->
				<view class="divider" v-if="index !== prescriptionList.length - 1"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		queryMedicines,
		isComments
	} from '@/api/order.js';
	export default {
		data() {
			return {
				prescriptionList: []
			}
		},

		methods: {
			getPrescriptionList() {
				let temp = {
					userId: this.$store.state.userId
				}
				queryMedicines(temp).then(res => {
					if (res.code === 1 && Array.isArray(res.data)) {
						// 处理返回的数组数据，添加评论相关状态字段
						this.prescriptionList = res.data.map(item => {
							// 拼接地址信息
							let addressParts = [];
							if (item.medicineOrderEconomize) addressParts.push(item
								.medicineOrderEconomize);
							if (item.medicineOrderMarket) addressParts.push(item.medicineOrderMarket);
							if (item.medicineOrderDistinguish) addressParts.push(item
								.medicineOrderDistinguish);
							if (item.medicineOrderAddress) addressParts.push(item.medicineOrderAddress);

							return {
								medicalRecordId: item.medicalRecordId,
								address: addressParts.join(''),
								phone: item.medicineOrderPhone,
								orderId: item.medicineOrderNumber,
								price: item.medicineOrderPrice,
								createTime: item.medicineOrderCreateTime,
								medicineOrderId: item.medicineOrderId,
								hasCommented: false, // 是否已评论
								checkingCommentStatus: false // 是否正在检查评论状态
							}
						});

						// 获取列表后批量检查评论状态
						this.checkAllCommentStatus();
					}
				})
			},

			// 批量检查所有订单的评论状态
			checkAllCommentStatus() {
				this.prescriptionList.forEach((item, index) => {
					this.checkCommentStatus(item.medicalRecordId, index);
				});
			},

			// 检查单个订单的评论状态
			checkCommentStatus(medicalRecordId, index) {
				// 如果是无效的记录ID，直接标记为已评论
				if (!medicalRecordId) {
					this.$set(this.prescriptionList[index], 'hasCommented', true);
					return;
				}

				// 标记为正在检查状态
				this.$set(this.prescriptionList[index], 'checkingCommentStatus', true);

				let temp = {
					medicalRecordId: medicalRecordId,
					userId: this.$store.state.userId
				}

				isComments(temp).then(res => {
					// 确保当前索引仍存在于数组中（防止列表已更新的情况）
					if (this.prescriptionList[index]) {
						this.$set(this.prescriptionList[index], 'checkingCommentStatus', false);
						if (res.code === 1) {
							this.$set(this.prescriptionList[index], 'hasCommented', res.data);
						} else {
							// 接口出错时默认视为未评论
							this.$set(this.prescriptionList[index], 'hasCommented', false);
						}
					}
				}).catch(() => {
					if (this.prescriptionList[index]) {
						this.$set(this.prescriptionList[index], 'checkingCommentStatus', false);
						this.$set(this.prescriptionList[index], 'hasCommented', false);
					}
				});
			},

			handleComment(medicalRecordId, index) {
				// 避免重复点击
				if (this.prescriptionList[index].checkingCommentStatus) return;

				// 跳转到评论页面
				uni.navigateTo({
					url: `/pages/commentsDoctor/commentsDoctor?medicalRecordId=${medicalRecordId}`
				});

				// 监听页面返回，刷新当前订单的评论状态
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.on('commentSubmitted', () => {
					// 评论提交后，更新状态为已评论
					this.$set(this.prescriptionList[index], 'hasCommented', true);
				});
			}
		},

		onLoad() {
			// 从接口获取处方列表数据
			this.getPrescriptionList();
		}
	}
</script>

<style>
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.header {
		padding: 30rpx 0;
		text-align: center;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.prescription-list {
		margin-top: 20rpx;
	}

	.prescription-card {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		position: relative;
	}

	.info-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 25rpx;
		font-size: 28rpx;
	}

	.info-item:last-child {
		margin-bottom: 30rpx;
	}

	.label {
		color: #666;
		width: 160rpx;
		flex-shrink: 0;
	}

	.value {
		color: #333;
		flex: 1;
	}

	.price {
		color: #e93b3d;
		font-weight: bold;
	}

	.button-container {
		margin-top: 10rpx;
		display: flex;
		justify-content: center;
	}

	.comment-btn {
		background-color: #07c160;
		border-radius: 50rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		width: 100%;
	}

	.comment-btn.commented {
		background-color: #cccccc;
		color: #666666;
	}

	.loading-indicator {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
		width: 100%;
	}

	/* 分隔线样式 */
	.divider {
		position: absolute;
		bottom: -15rpx;
		left: 30rpx;
		right: 30rpx;
		height: 1rpx;
		background-color: #eee;
	}
</style>